import React, { Component } from 'react'

class Field extends Component{
    state={
        value:""
    }
    clear(){
        this.setState({
            value:""
        })
      }
  render() {
    return (
      <div>
        <label>{this.props.label}</label>:
        <input type={this.props.type} value={this.state.value}  onChange={
            (e)=>{
                this.setState({
                    value:e.target.value
                })
            }
        }/>
      </div>
    )
  }
}
export default class App extends Component {
    username=React.createRef()
    password=React.createRef()
  state={
    username:localStorage.getItem("username"),
    password:""
  }
  
  render() {
    return (
      <div>
        <h1>登录页面</h1>
        <Field type="text" label="用户名" ref={this.username}></Field>
        <Field type="password" label="密码" ref={this.password}></Field>
        <button onClick={()=>{
          console.log(this.username.current.state.value,this.password.current.state.value,"发送后端验证");
        }}>登录</button>
        <button onClick={()=>{
          this.username.current.clear()
          this.password.current.clear()
        }}>取消</button>
      </div>
    )
  }
}
